<template>
  <div class="wrap">
    <div class="top">
      <img class="banner" src="../assets/img/banner.webp" alt />
      <img class="head" src="../assets/img/minetx.webp" alt />
      <p class="hi">
        <span>Hi,Calvin</span>
        <img class="xiugai" src="../assets/img/xiugai.webp" @click="modifyThe" />
      </p>
      <img @click="jump" class="shezhi" src="../assets/img/shezhi1.webp" alt />
    </div>
    <ul>
      <router-link
        class="li"
        v-for="(item, index) in myList"
        :key="index"
        :to="item.path"
        @click="change(item.path, item.content)"
      >
        <img class="icon" :src="item.img" alt />
        <span>{{ item.content }}</span>
        <img class="arrow" src="../assets/img/arrow.webp" alt />
      </router-link>
    </ul>
    <div class="zhezhao" v-show="flag1 || flag" @touchmove.prevent>
      <div class="menban" v-show="flag1">
        <div class="guanzhu">
          <img @click="none1" src="../assets/img/juxing.png" alt />
          <div class="gongzhonghao">
            <p class="title">
              关注爱课公众号
              <br />
              <span>您将获得以下集中特权</span>
            </p>
            <div class="tequan">
              <div class="border">
                <img src="../assets/img/ziliao.webp" alt />
                <div class="right">
                  <p>学习资料</p>
                  <span>课程资料在线下载</span>
                </div>
              </div>
            </div>
            <div class="tequan">
              <div class="border">
                <img src="../assets/img/fuli.webp" alt />
                <div class="right">
                  <p>福利活动</p>
                  <span>参与福利赢取奖品</span>
                </div>
              </div>
            </div>
            <div class="tequan">
              <div class="border">
                <img src="../assets/img/kefu.webp" alt />
                <div class="right">
                  <p>专属客服</p>
                  <span>一对一客服答疑。</span>
                </div>
              </div>
            </div>
            <van-button class="van-button" v-show="flag1" @click="none1" type="primary" round>
              关注爱课公众号
            </van-button>
          </div>
        </div>
      </div>
      <div class="menban" v-show="flag">
        <img class="cha" @click="none" src="../assets/img/cha.png" alt />
        <img src="../assets/img/zhongjian.png" alt />
        <img class="miaoshu" src="../assets/img/miaoshu.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";

export default {
  setup() {
    const router = useRouter();
    const flag = ref(false);
    const flag1 = ref(false);
    const modifyThe = () => {
      console.log(2);
      router.push("/pass");
    };
    const none = () => {
      flag.value = !flag.value;
    };
    const none1 = () => {
      flag1.value = !flag1.value;
    };
    const change = (e, c) => {
      if (e !== "/home/mine") return;
      if (c === "关注公众号") {
        flag1.value = !flag1.value;
      }
      if (c === "我的学习规划师") {
        flag.value = !flag.value;
      }
    };

    const jump = () => {
      router.push("/home/shezhi");
    };
    const myList = [
      {
        path: "/home/liwu",
        img: require("@/assets/img/liwu.webp"),
        content: "邀请有礼"
      },
      {
        path: "/home/mine",
        img: require("@/assets/img/study.webp"),
        content: "我的学习规划师"
      },
      {
        path: "/home/mine",
        img: require("@/assets/img/wechat.webp"),
        content: "关注公众号"
      },
      {
        path: "/home/class",
        img: require("@/assets/img/class.webp"),
        content: "课程明细"
      },
      {
        path: "/home/duihuan",
        img: require("@/assets/img/duihuan.webp"),
        content: "课程兑换"
      },
      {
        path: "/home/gift",
        img: require("@/assets/img/zuanshi.webp"),
        content: "钻石明细"
      },
      {
        path: "/home/read",
        img: require("@/assets/img/read.webp"),
        content: "学习报告"
      },
      {
        path: "/home/make",
        img: require("@/assets/img/make.webp"),
        content: "跟读作品"
      },
      {
        path: "/home/car",
        img: require("@/assets/img/car.webp"),
        content: "物流详情"
      },
      {
        path: "/home/jiance",
        img: require("@/assets/img/jiance.webp"),
        content: "设备检测"
      },
      {
        path: "/home/help",
        img: require("@/assets/img/help.webp"),
        content: "帮助与反馈"
      }
    ];
    return {
      modifyThe,
      myList,
      jump,
      change,
      flag,
      none,
      flag1,
      none1
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      const imgbig = document.querySelector(".head");
      const hi = document.querySelector(".hi");
      const xiugai = document.querySelector(".xiugai");
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        imgbig.style.cssText = "width:1.6rem;height:1.6rem;";
        hi.style.cssText =
          "position: fixed;left:0.533333rem;top:2.1333rem;fontSize:0.58667rem;transition:.5s;transition:.5s;";
        xiugai.style.cssText = "width:0.6667rem;height:0.6667rem;transition:.5s;";
      } else {
        imgbig.style.cssText = "width:1.2rem;height:1.2rem;transition:.5s;";
        hi.style.cssText =
          "position: fixed;left:1.933333rem;top:0.63rem;font-size:0.4rem;transition:.5s;";
        xiugai.style.cssText = "width:0.37rem;height:0.37rem;transition:.5s;";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  position: relative;
  .shezhi {
    position: fixed;
    right: 10px;
    top: 20px;
    width: 20px;
    height: 20px;
  }
  .head {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    z-index: 999;
  }
  p {
    position: fixed;
    top: 80px;
    left: 20px;
    font-size: 22px;
    color: #fff;
    img {
      width: 25px;
      height: 25px;
      vertical-align: top;
    }
  }
}
.wrap {
  margin-bottom: 50px;
  position: relative;
  .zhezhao {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    top: 0;
    left: 0;
  }
}
.banner {
  width: 100%;
  height: 200px;
}
ul {
  position: relative;
  .li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 46px;
    font-weight: 600;
    line-height: 46px;
    img {
      width: 24px;
      height: 24px;
    }
    .icon {
      margin: 0 15px;
    }
    .arrow {
      position: absolute;
      right: 15px;
      width: 10px;
      height: 10px;
    }
  }
  span {
    font-size: 12px;
    color: #000;
  }
}
.menban {
  width: 290px;
  height: 330px;
  img {
    width: 276px;
    height: 375px;
  }
  .cha {
    width: 30px;
    height: 30px;
    position: fixed;
    right: 0px;
    top: -30px;
  }
  .miaoshu {
    width: 220px;
    height: 50px;
  }
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}
.guanzhu {
  position: relative;
  img {
    width: 276px;
    height: 375px;
  }
  .gongzhonghao {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    img {
      width: 36px;
      height: 36px;
      vertical-align: middle;
    }
    .title {
      margin-left: 1.5rem;
      width: 178px;
      height: 18px;
      font-size: 18px;
      font-weight: 600;
    }
    span {
      color: #ddd;
      font-weight: normal;
      font-size: 12px;
    }
  }
}
.tequan {
  display: flex;
  justify-content: center;
  align-items: center;
  .border {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-top: 15px;
  }
  .right {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 10px;
    margin-bottom: 15px;
  }
  p {
    line-height: 0;
    font-size: 14px;
    font-weight: 600;
  }
}
.van-button {
  width: 225px;
  height: 40px;
  margin-top: 20px;
}
</style>
